<template>
  <div class="center_bottom">
    <div class="center-item">
      <img src="../../assets/img/logo/1.png" alt="" />
      <span>服务机构</span>
      <!-- <dv-digital-flop :config="config" style="width: 200px; height: 50px" /> -->
      <p><span class="num">513</span> 家</p>
    </div>
    <div class="center-item">
      <img src="../../assets/img/logo/2.png" alt="" />
      <span>服务社区</span>
      <p><span class="num">3</span> 家</p>
    </div>
    <div class="center-item">
      <img src="../../assets/img/logo/3.png" alt="" />
      <span>居家机构</span>
      <p><span class="num">7</span> 家</p>
    </div>
    <div class="center-item">
      <img src="../../assets/img/logo/4.png" alt="" />
      <span>服务医院</span>
      <p><span class="num">5</span> 家</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {},
      config: {
        number: [513],
        content: "{nt}",
      },
    };
  },
  props: {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .center-item {
    width: 22%;
    height: 150px;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #66ccff85;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(155, 217, 255, 0.559);
    img {
      margin-bottom: 10px;
      width: 50px;
    }
    p {
      margin: 10px 0 0;
    }
    .num {
      font-size: 24px;
      color: aqua;
    }
  }
}
</style>
